<template>
  <div>
    <el-card>
      <!--头部区域-->
      <el-row :gutter="20" type="flex">
        <el-col>
          <el-form :inline="true" ref="searchFrom" :model="topForm">
            <el-form-item label="工作室名称：" prop="studio_name">
              <el-select v-model="topForm.studio_name" placeholder="请选择" clearable="clearable">
                <el-option
                  v-for="(options, index) in this.options"
                  :key="index"
                  :label="options['studio_name']"
                  :value="options['studio_name']">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工作室地区：" prop="studio_location">
              <Cascader
                @formLocalInfo="getTopFormLocation"
                :key="topFormItem"
                >
              </Cascader>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="studioInfo()" size="small">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="topFormClear()" size="small">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="dialogVisible=true;" size="small">新增</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!--数据展示表格-->
      <el-table
        :data="tableData"
        border
        max-height="500px"
        style="width: 100%">
        <el-table-column
          label="#"
          type="index"
          width="50px"
          align="center">
        </el-table-column>
        <el-table-column
          prop="studio_name"
          label="工作室名称">
        </el-table-column>
        <el-table-column
          prop="studio_img"
          label="工作室封面">
          <template slot-scope="scope">
            <div>
              <el-popover placement="right" trigger="hover">
                <el-image
                  style="height: 300px"
                  :src="scope.row.studio_img"
                  :fit="contain">
                </el-image>
                <el-image
                  slot="reference"
                  style="width:100px ;height: 100px"
                  :src="scope.row.studio_img"
                  :fit="contain">
                </el-image>
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="studio_courseTable"
          label="工作室课表">
          <template slot-scope="scope">
            <div>
              <el-popover placement="right" trigger="hover">
                <el-image
                  style="height: 300px"
                  :src="scope.row.studio_courseTable"
                  :fit="contain">
                </el-image>
                <el-image
                  slot="reference"
                  style="width:100px ;height: 100px"
                  :src="scope.row.studio_courseTable"
                  :fit="contain">
                </el-image>
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="studio_openTime"
          label="营业时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="studio_position"
          label="工作室地址"
          width="180">
        </el-table-column>
        <el-table-column
          prop="caozuo"
          label="操作">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showEditDialog(scope.row.id)"
            ></el-button>
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeStudioById(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--翻页和条数切换-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

    </el-card>
    <!--新增/编辑表单-->
    <div>
      <el-dialog @close="dialogFormClear" :visible.sync="dialogVisible" width="70%" top="8vh">
        <div slot="title" class="dialog-title" >
          <span v-if="dialogTitle==='编辑'">编辑</span>
          <span v-else>新增</span>
        </div>
        <el-form ref="form" :model="form" label-width="100px">
          <el-row :gutter="20" type="flex" justify="left" class="form_flex">
            <el-col :span="12">
              <el-form-item label="工作室名称:">
                <el-input v-model="form.studio_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="营业时间:">
                <div class="block">
                  <el-time-picker
                    is-range
                    v-model="form.studio_openTime"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围"
                    value-format="HH:mm:ss"
                    >
                  </el-time-picker>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工作室地址:">
                <Cascader
                  @formLocalInfo="getLocationInfo"
                  :local="form.studio_location"
                >
                </Cascader>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="详细地址:">
                <el-input v-model="form.studio_position" placeholder="请输入详细地址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="工作室封面:">
                <Upload ref="uploadImg" @imgChange="getStudioImgFilePath" :fp="form.studio_img"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="工作室课表:">
                <Upload ref="uploadCourseTable" @imgChange="getCourseTableFilePath" :fp="form.studio_courseTable"
                />
              </el-form-item>
            </el-col>
            <el-form-item>
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false;addOrEditForm()">确 定</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {Form} from "element-ui";
  import Upload from "../../components/Upload.vue";
  import Cascader from "../../components/Cascader.vue";
  import json from "vue-resource/src/http/interceptor/json";

  export default {
    components: {Cascader, Upload},
    data() {
      return {
        // <!--底部翻页数据内容-->
        tableData: [],// 当页数据
        allData: [],// 全部数据
        options:[],// 搜索栏工作室名单
        current:1,
        total: 0,
        size:10,
        // <!--顶部搜索栏输入内容-->
        topForm:{
          studio_name:'',
          studio_location:[],
        },
        defaultTopForm:{
          studio_name:'',
          studio_location:[],
        },
        dialogVisible:false,
        dialogTitle:'',
        //dialog新增编辑表单
        form:{
          id:'',
          studio_name:'',
          studio_location: [],
          studio_position:'',
          studio_openTime:['00:00:00', '00:00:00'],
          studio_img:'',
          studio_courseTable:'',
        },
        // 默认dialog空表单，提供关闭回调
        defaultForm:{
          id:'',
          studio_name:'',
          studio_location: [],
          studio_position: '',
          studio_openTime:['00:00:00', '00:00:00'],
          studio_img:'',
          studio_courseTable:'',
        },
      };
    },
    created() {
    },
    mounted:function () {
      this.studioInfo()
      this.studioGroup()
    },
    methods: {
      //删除课程功能
      removeStudioById(id){
        this.$confirm('确定要删除该工作室吗', '提示',{
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:'warning'
        }).then(()=>{
          this.$axios.delete('api/studio/del',{
            params:{id: id},
          }).then((res)=>{
            if (res.data['respCode']==='000000'){
              this.$message({ message:'删除成功',type:'success'});
              this.studioInfo()
            }else {
              this.$message.error(res.data['respMsg'])
            }
          });
        })
          .catch(()=>{
            this.$message({ type:"info",message:'已取消删除'})
          })
      },
      //点击编辑按钮后查询ID并给表单赋数据，打开dialog
      showEditDialog(id) {
        this.dialogTitle = '编辑'
        this.$axios.get('api/studio/info/',{
          params:{id: id}
        }).then((res)=>{
          if (res.data['respCode']==='000000'){
            this.form.studio_courseTable = res.data['list'][0]['studio_courseTable']
            this.form.studio_position = res.data['list'][0]['studio_position']
            this.form.studio_name = res.data['list'][0]['studio_name']
            this.form.studio_img = res.data['list'][0]['studio_img']
            this.form.studio_openTime=eval(res.data['list'][0]['studio_openTime'])
            this.form.studio_location=eval(res.data['list'][0]['studio_location'])
            this.dialogVisible=true
          }else {
            this.$message.error(res.data['respMsg'])
          }
        })
      },
      //新增和编辑操作
      addOrEditForm() {
        // 编辑表单
        if (this.form.id){
          this.$axios.get('api/studio/edit/', {
          params: {form:JSON.stringify(this.form)}
        }).then((response)=>{
          var res = response.data
          if (res['respCode'] === '000000'){
            this.$message.success('修改成功')
            this.studioInfo()
          }else {
            this.$message.error(res['respMsg'])
          }
        })
        }else {
          // 新增表单
          this.dialogTitle='新增课程'
          this.$axios.get('api/studio/add/', {
            params: {
              form:JSON.stringify(this.form)
            }
          }).then((response) => {
            var res = response.data
            if (res['respCode'] === '000000') {
              this.studioInfo()
              this.$message.success('新增成功')
            } else {
              this.$message.error('新增失败')
              console.log(res['respMsg'])
            }
          })
        }
      },
      // <!--展示后端数据列表-->
      //查询按钮操作
      studioInfo() {
        this.$axios.get('api/studio/info/',{
          params: {topForm:JSON.stringify(this.topForm)}
            }).then((response)=>{
              var res = response.data
              if (res['respCode']==='000000'){
                this.allDate = res['list']
                // <!--slice切片展示当页数据-->
                this.tableData = this.allDate.slice(
                  (this.current-1)* this.size,
                  this.current * this.size
                );
                this.total = this.allDate.length
                console.log(res['list'])
              }else {
                console.log(typeof (this.topForm))
                console.log(res['respMsg'])
              }
            })
          },
      //查询工作室分组
      studioGroup() {
        this.$axios.get('api/studio/group/',{
          params: {}
            }).then((response)=>{
              const res = response.data
              if (res['respCode']==='000000'){
                this.options = JSON.parse(res['list'])
              }else {
                console.log(res['respMsg'])
              }
            })
          },
      //获取表单中的开始时间和结束时间
      getTime() {
        this.form.studio_openTime[0] = this.form.studio_openTime[0]
        this.form.studio_openTime[1]= this.form.studio_openTime[1]
      },
      //获取后端response中的文件路径，upload路由通信，见Upload组件
      getStudioImgFilePath(filepath) {
        this.form.studio_img = filepath
      },
      getCourseTableFilePath(filepath) {
        this.form.studio_courseTable = filepath
      },
      getLocationInfo(selectedOptions){
        this.form.studio_location = selectedOptions
      },
      getTopFormLocation(selectedOptions){
        this.topForm.studio_location = selectedOptions
        console.log(this.topForm.studio_location)
      },
      //dialog关闭回调重置dialog表单数据
      dialogFormClear() {
        this.form = Object.assign({}, this.defaultForm)
        this.dialogTitle = ''
        // el-date组件列表，需要用set方法进行重置
        // this.$set(this.form.studio_openTime,0,'')
        // this.$set(this.form.studio_openTime,1,'')
      },
      //重置按钮操作
      topFormClear() {
        this.topForm = Object.assign({}, this.defaultTopForm)
        this.topFormItem = new Date()
      },
      //页面条数切换钩子
      handleSizeChange(val) {
        this.size = val
        this.current = 1
        this.courseInfo()
        console.log(`每页 ${val} 条`);
      },
      //页码切换的钩子
      handleCurrentChange(val) {
        this.current = val
        this.courseInfo()
        console.log(`当前页: ${val}`);
      },
    },
  }
</script>

<style scoped>
.el-pagination {
  float: right;
  padding: 10px;
}
.form_flex {
  flex-wrap: wrap;
  flex-direction: row;
}
</style>
